<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 系统设置【仅超管可见】</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="query.tenantName" @keyup.enter.native="handleSearch" placeholder="租户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input style="display: none;"></el-input>
					<el-select v-model="query.version" clearable placeholder="-版本查询-">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 row-key="id">
				@selection-change="handleSelectionChange" >

				<el-table-column class-name="user2" prop="tenantName" label="租户名"></el-table-column>
				<el-table-column prop="legalPerson" label="法人" align="center"></el-table-column>
				<el-table-column prop="telephone" label="联系方式" align="center"></el-table-column>
				<el-table-column prop="version" :formatter="stateFilter" align="center" label="系统版本"></el-table-column>
				<el-table-column prop="description" align="center" label="备注"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="1"
				 :page-sizes="[10, 15, 20, 30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
				</el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :before-close="closeDialog" :close-on-click-modal="false" title="租户" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" id="mform" label-width="100px" :rules="rulesForm">
				<el-form-item label="租户名" prop="tenantName">
					<el-input v-model="form.tenantName" id="tenantName"></el-input>
				</el-form-item>

				<el-form-item label="系统版本">
					<el-radio v-model="form.version" label="0">标准版</el-radio>
					<el-radio v-model="form.version" label="1">进阶版</el-radio>
					<el-radio v-model="form.version" label="2">进阶版</el-radio>
				</el-form-item>
				<el-form-item label="法人" prop="legalPerson">
					<el-input v-model="form.legalPerson" id="legalPerson"></el-input>
				</el-form-item>

				<el-form-item label="联系方式" prop="telephone">
					<el-input v-model="form.telephone" id="telephone"></el-input>
				</el-form-item>
				<el-form-item label="备注信息" prop="description">
					<el-input id="description" type="textarea" :rows="3" placeholder="不超过50个字" v-model="form.description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog()">取 消</el-button>
				<el-button type="primary" @click="saveEdit('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
 		name: 'tenant_list',//去掉name则每次点击菜单，都出发created
		data() {
			var checkName = (rule, value, callback) => {
				if (value.trim().length < 2 || value.trim().length > 20) {
					return callback(new Error('租户名必须在 2 至 20 字符之间!'));
				}
			   
				axios.get(config.gatewayUrl + '/set/tenant/checkexist?TenantName=' + value + '&Id=' + this.form.id, {}).then((res) => {
					if (res.data == true) {
						return callback(new Error('该租户名已存在!'));
					}
					else{ 
						callback();
					}
				});
			
			};
			
			
			return {
				query: {
					name: '',
					version: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					version: "0"
				},
				loading: false,
				options: [ {
					value: '0',
					label: '标准版'
				}, {
					value: '1',
					label: '进阶版'
				}, {
					value: '2',
					label: '旗舰版'
				}],
				rulesForm: {
					tenantName: [{
					    validator: checkName,
						trigger: 'blur'
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人!'
					}],
					telephone: [{
						required: true,
						message: '请输入联系方式!'
					}],
					description: [{
						min: 0,
						max: 50,
						message: '长度不能超过50个字符'
					}]
				}
			};
		},
		created() {
		 
			this.loading = true;
			this.getData();
		},
		methods: {
			stateFilter(row, column) {
				var str = '';
				switch (parseInt(row.version)) {
					case 0:
						str = '标准版';
						break;
					case 1:
						str = '进阶版';
						break;
					case 2:
						str = '旗舰版';
						break;
					default:
						str = row.state;
						break;
				}
				return str;
			},

			// 触发搜索按钮
			handleSearch() {
				this.query.pageIndex = 1;
				this.getData();
			},
			getData() {
				this.loading = true;
				var parmas = {
					tenantName: this.query.tenantName,
					version: this.query.version==''?-1:parseInt(this.query.version),
					pageIndex: this.query.pageIndex,
					pageSize: this.query.pageSize
				};

				axios({
					url: config.gatewayUrl + '/set/tenant/getpage',
					method: 'post',
					data: parmas,
					headers: {
						// 'Content-Type': 'multipart/form-data'
					}
				}).then((res) => {
					this.tableData = res.data.list;
					this.pageTotal = res.data.total;
					this.loading = false;
				});
			},

			// 编辑操作
			handleEdit(index, row) {
				if (row) {
					this.idx = index;
					this.form = row;
					this.form.version = String(row.version);
				} else {
					this.form.version = '0';
			    	this.form.id = '';
				}
				this.editVisible = true;
				console.log(this.tableData);
			},
			// 保存编辑
			saveEdit(formName) {
				var that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {

						var dto = this.form;
						dto.version = parseInt(dto.version);
						axios
							.post(config.gatewayUrl + '/set/tenant/post', dto)
							.then((res) => {
								if (res.data.result == false) {
									that.$message.error(res.data.promptMsg);
									console.log(res);
								} else {
									that.$refs.form.clearValidate();
									//that.editVisible = false;
									that.closeDialog();
									that.$message.success(`保存成功!`);
									that.getData();
								}
							})
							.catch((error) => {
								console.log(error); //  错误处理 相当于error
							});
						that.$refs.form.clearValidate();
					} else {
						return false;
					}
				});
			},

			closeDialog() {


				this.selectRole = [];
				var that = this;
				//this.$refs.form.resetFields();
				this.form = {
					id: '',
					tenantName: '',
					description: '',
					version: 0
				};
				setTimeout(function() {
					that.$refs.form.clearValidate();

				}, 100);
				this.editVisible = false;

			},
			// 分页导航
			handlePageChange(val) {
				//跳转到
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			handleSizeChange(val) {
				//改变页码
				this.query.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				//下一页console.log(`当前页: ${val}`);
				this.query.pageIndex = val;
				this.getData();
			}
		},
		watch: {}
	};
</script>
